<template>
	<view>
		<view v-if="!isLoad">
			<view class="recommend">
				<swiper :indicator-dots="true" :autoplay="true" :circular="true">
					<swiper-item v-for="(item,index) in testlist" :key="index" v-if="item.type=='poster'" @click="goIntroduce(item._id)">
						<image :src="item.testimg" mode="widthFix"></image>
					</swiper-item>
				</swiper>
			</view>

			<view class="card">
				<view class="bgcard" v-for="(item,index) in testlist" :key="index" :style="{backgroundImage: 'url('+item.testimg+')'}"
				 v-if="item.type=='recommend'" @click="goIntroduce(item._id)">
					<view>{{item.title}}</view>
				</view>
			</view>


			<view class="title">热门推荐<text style="font-size: 25rpx; margin-left: 10rpx; color: #838383;">仅供娱乐</text></view>

			<scroll-view :scroll-x="true" class="scroll">
				<view class="scard" v-for="(item,index) in testlist" :key="index" @click="goIntroduce(item._id)" v-if="item.type=='hot'">
					<image :src="item.smimg"></image>
					<view class="hottitle">{{item.title}}</view>
					<view class="hotviews">{{item.times}} 人测过</view>
					<button>测试</button>
				</view>
			</scroll-view>

			<view class="account">
				<!-- #ifdef MP-WEIXIN -->
				<official-account></official-account>
				<!-- #endif -->
			</view>

			<view class="title">全部测试<text style="font-size: 25rpx; margin-left: 10rpx; color: #838383;">仅供娱乐</text></view>

			<view v-for="(item,index) in testlist" :key="index" @click="goIntroduce(item._id)" v-if="item.type!='ad' && item.type!='hide'">
				<view class="testlist">
					<view>
						<image :src="item.smimg"></image>
					</view>
					<view class="testname">
						<view>{{item.title}}</view>
						<view class="number"> <text>{{item.times}}</text>人已测</view>
					</view>
					<button class="test_btn">测试</button>

				</view>
				<!-- #ifdef MP-TOUTIAO -->
				<view v-if="index==3">
					<ad type="lImg" :unit-id="bannerAd" scale="110"></ad>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view v-if="index==3">
					<ad :unit-id="bannerAd"></ad>
				</view>
				<!-- #endif -->
			</view>
			<!-- <view v-if="isDouyin">
				<tip></tip>
			</view> -->

		</view>

	</view>
</template>

<script>
	import API from "../../api.js";
	import Tip from "../../component/Tip";
	var interstitialAd = null;
	export default {
		data() {
			return {
				page: 0,
				testlist: [],
				isLoad: true,
				isDouyin: "",
				bannerAd:""
			}
		},
		components: {
			Tip
		},
		onLoad() {
			var that = this;
			uni.showLoading({
				title: '加载中'

			});
			that.getTestList();
			that.adLoad();
			that.douyin();
			that.bannerAd = API.ad.bannerAd;
		},
		onShow() {
			if (interstitialAd) {
				interstitialAd.show().catch((err) => {
					console.error(err)
				})
			}
		},


		onReachBottom() {
			let page = this.page + 20;
			// console.log(page)
			uniCloud.callFunction({
				name: "getTestList",
				data: {
					page: page
				}
			}).then(res => {
				this.page = page;
				this.testlist = this.testlist.concat(res.result.data)
			})
		},
		onShareAppMessage: function(shareOption) {
			let that = this
			if (shareOption.from == 'button') { // 判断是按钮还是右上角分享
				return {
					channel: 'video', // 必写 video
					templateId: '11111', // 分享的模版 id 
					title: "趣味测试，点击这里就能找到!", // 分享的标题
					desc: '趣味测试，为你的闲余生活加点乐趣。', // 分享的内容介绍
					path: `/pages/index/index`, // 分享的路径
					extra: {
						videoTopics: ["个性格测", "心理测试", "趣味测试"] // 只有抖音才会有的属性
					},
				}
			} else { // 右上角分享
				return {
					templateId: '1111111', // 分享的模版 id
					title: "趣味测试，点击这里就能找到!", // 分享的标题
					desc: '趣味测试，为你的闲余生活加点乐趣。', // 分享的内容介绍
					path: `/pages/index/index`, // 分享的路径
				}
			}
		},
		//#ifdef MP-WEIXIN
		onShareTimeline:function(res){
			return {
				title:"趣味测试，来体验一下吧"
			}
		},
		//#endif
		methods: {
			getTestList: function() {
				uniCloud.callFunction({
					name: "getTestList",
					data: {
						page: 0
					}
				}).then(res => {
					// console.log(res.result.data)
					this.testlist = res.result.data;
					uni.hideLoading();
					this.isLoad = false;
				})
			},
			goIntroduce: function(e) {
				// console.log(e)
				uni.navigateTo({
					url: "/pages/introduce/introduce?id=" + e
				})
			},
			msgSecCheck: function() {
				uniCloud.callFunction({
					name: "msgSecCheck",
					data: {
						text: ''
					}
				}).then(res => {
					console.log(res);
				})

			},

			adLoad: function() {
				if (wx.createInterstitialAd) {
					interstitialAd = wx.createInterstitialAd({
						adUnitId: API.ad.createInterstitialAd //这里是插屏广告id
					})
					interstitialAd.onLoad(() => {
						console.log('onLoad event emit')
					})
					interstitialAd.onError((err) => {
						console.log('onError event emit', err)
					})
					interstitialAd.onClose((res) => {
						console.log('onClose event emit', res)
					})
				}
			},
			douyin: function() {
				let appName = uni.getStorageSync("appName");
				var that = this;
				if (appName == "Douyin") {
					that.isDouyin = true
				} else {
					that.isDouyin = false
				}
			},

		}
	}
</script>

<style lang="less">
	.recommend {
		image {
			height: 200rpx;
			width: 700rpx;
			margin: 0 25rpx;
			padding-bottom: 10rpx;
		}
	}

	.title {
		font-weight: bold;
		font-size: 35rpx;
		padding: 30rpx;
		border-top: 10rpx solid #f4f4f4;
		border-bottom: 10rpx solid #f4f4f4;
	}

	.testlist {
		display: flex;
		flex-wrap: wrap;
		padding: 0 0 20rpx 20rpx;
		margin: 25rpx 20rpx;
		border-radius: 30rpx;

		image {
			width: 110rpx;
			height: 110rpx;
			border-radius: 20rpx;
		}

		.testname {
			width: 400rpx;
			margin-left: 20rpx;
			margin-right: 30rpx;
			font-size: 30rpx;

			.number {
				color: #AAAAAA;
				margin-top: 20rpx;
				margin-right: auto;

				text {
					color: #DD524D;
					margin-right: 10rpx;
					font-size: 30rpx;
				}
			}

		}

		.test_btn {
			flex: 1;
			text-align: right;
			background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
			margin: 25rpx 0;
			border-radius: 50rpx;
			font-size: 30rpx;
			color: #FFFFFF;


		}

		.test_btn::after {
			border: none;
		}

		.btn {
			image {
				width: 80rpx;
			}
		}
	}

	.card {
		padding: 15rpx;
		display: flex;
		flex-wrap: wrap;

		.bgcard {
			position: relative;
			height: 150rpx;
			width: 320rpx;
			border-radius: 30rpx;
			background-image: url(../../static/cangtoushi.png);
			background-size: 100%;
			padding: 20rpx 0 0 20rpx;
			z-index: 0;
			margin: 10rpx;

			view {
				z-index: 5;
				color: #FFFFFF;
				position: absolute;
				font-size: 30rpx;
			}

		}

		.bgcard::after {
			content: "";
			border-radius: inherit;
			width: 100%;
			height: 100%;
			display: block;
			background-color: rgba(0, 0, 0, 0.3);
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			z-index: 1;
		}

		.smcard {
			width: 350rpx;
			margin-left: 20rpx;

			image {
				width: 350rpx;
				height: 75rpx;
			}


		}
	}

	.scroll {
		width: 100%;
		white-space: nowrap;
		background-color: #f4f4f4;

		.scard {
			background-color: #FFFFFF;
			display: inline-block;
			width: 250rpx;
			margin: 20rpx;
			padding: 10rpx;
			border-radius: 25rpx;


			image {
				width: 200rpx;
				height: 200rpx;
				margin: 5rpx 25rpx;
				border-radius: 25rpx;
			}

			.hottitle {
				text-overflow: ellipsis;
				font-size: 30rpx;
				margin: 5rpx 10rpx;
				text-align: center;
				white-space: nowrap;
				width: 230rpx;
				overflow: hidden;


			}

			.hotviews {
				margin-top: 10rpx;
				font-size: 25rpx;
				text-align: center;
			}

			button {
				background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
				font-size: 25rpx;
				width: 180rpx;
				color: #FFFFFF;
				margin-top: 20rpx;
				border-radius: 50rpx;
			}

			button::after {
				border: none;
			}
		}
	}
</style>
